<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图展示</title>
	<link rel="icon" href="../images/favicon.png" type="image/x-icon">
    
    <script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6ee01182e8363350bc686acb8a4ad9ad&plugin=AMap.GraspRoad"></script>
	<link rel="stylesheet" href="../element/theme-default/index.css">
	<link rel="stylesheet" href="../css/playback.css"/>
	<script src="../js/datetime.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../js/map-gps-mongo.js" ></script>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/RangeSlider.js" ></script>
    <script src="../js/vue.js"></script>
	<script src="../js/prototype.js"></script>
    <script src="../element/index.js"></script>
    
</head>
<body>
	<div class="wrap" v-cloak>
		<div id="container" tabindex="0"></div>
		<div class="form_box">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="设备编号:" style="width:330px">
				  <el-input disabled v-model="form.vehicleNo" size="small"></el-input>
				</el-form-item>
			  <el-form-item label="开始时间:" style="width:330px">
			    <el-date-picker type="datetime" size="small" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" v-model="form.startTime" style="width: 100%;"></el-date-picker>
			  </el-form-item>
			  <el-form-item label="结束时间:" style="width:330px">
			    <el-date-picker type="datetime" size="small" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" v-model="form.endTime" style="width: 100%;"></el-date-picker>
			  </el-form-item>
			  <!-- <el-form-item label="选择时间:" style="width:330px">
			    <el-col :span="11">
			      <el-time-picker type="fixed-time" size="small" placeholder="选择时间" v-model="form.time1" style="width: 100%;"></el-time-picker>
			    </el-col>
			    <el-col class="line" :span="2">-</el-col>
			    <el-col :span="11">
			      <el-time-picker type="fixed-time" size="small"  placeholder="选择时间" v-model="form.time2" style="width: 100%;"></el-time-picker>
			    </el-col>
			  </el-form-item> -->
			  <el-form-item>
			    <el-button style="width:95%" size="small" @click="onSubmit">搜索</el-button>
			  </el-form-item>
			</el-form>
			<div class="btn_group">
				 <el-button onclick="moveAlong()" size="mini">开始</el-button>
				 <el-button onclick="stopMove()" size="mini">重置</el-button>
				 <el-button onclick="pauseMove()" size="mini">暂停</el-button>
				 <el-button onclick="resumeMove()" size="mini">继续</el-button>
			</div>
			<div id="test">
				<span>调整回放倍数:</span>
				<span style="margin-left:20px;">1&nbsp;</span>
					<input type="range" class="inp" onclick="setMoveSpeed(this)" value="1" min="1" />
				<span>&nbsp;100</span>
			</div>	
		</div>
	</div>
	
    <script type="text/javascript">
		var _this='';
		var myControl=new Vue({
		    el:".wrap",
		    data:{
				pathParam:[],		//轨迹
				allData:{},	//所有数据
				tripDetailVos:[],	//行程开始结束坐标	
				form:{
					startTime: '',
					endTime: '',
					vehicleNo:''
				}
		    },
		    methods:{
		        getData:function(){
					var startTime=getQueryString('startTime');
					var endTime=getQueryString('endTime');
					if(startTime){
						this.form.startTime=startTime;
						this.form.endTime=endTime;
					}
		            this.form.vehicleNo=getQueryString('plateNum');
		        },
				onSubmit(){
					_this.tableData=[];//  清空table的值
					this.form.deviceNumber=this.form.vehicleNo;
					var json=JSON.parse(JSON.stringify(this.form));
					console.log(json);
					showGps();
					// $.ajax({
					//     type: 'get',   //POST/PUT/DELETE/HEAD...
					//     url:"http://192.168.2.161:8810/cloud/getTripDetailVoList",
					//     // beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
					//     data:json,
					//     dataType: 'json',	//text/script/xml/json/jsonp
					//     // contentType:"application/json; charset=UTF-8",
					//     success: function (data) {
							
					// 		if(data.code==1){
					// 			_this.pathParam=data.data.tripInfoVoList;
					// 			if(_this.pathParam){
					// 				$.each(_this.pathParam,function(key,val){
					// 					val.x=parseFloat(val.x);
					// 					val.y=parseFloat(val.y);
					// 					val.sp=parseFloat(val.sp);
					// 					val.ag=parseFloat(val.ag);
					// 					val.tm=parseFloat(val.tm);
					// 				});
					// 			}
					// 			_this.tripDetailVos=data.data.tripDetailVos;
					// 			_this.allData=data.data;
					// 			newLoadPath();
					// 		}
					//     }
					// });
					
				}
		    },
		    mounted:function(){
				_this=this;
				this.getData();
				initialize();
				var change = function(inp) {		
				}
				$('.inp').RangeSlider({ min: 0,   max: 100,   callback: change});
		    }
		});
        
    </script>
</body>
</html>